<template>
  <div class="main-content-container box">
    <!-- 顾客来源 -->
    <div ref="search" class="app-search">
      <el-row>
        <el-col class="buttons">
          <el-button @click="addSources">+ 增加来源</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 92) + 'px'">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :row-class-name="tableColor"
        :height="innerHeight"
      >
        <el-table-column
          prop="no"
          label="编号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="type"
          label="类型"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="name"
          label="名称"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="automaticSynchronization"
          label="自动同步"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="commissionRate"
          label="佣金比例"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            {{ row.commissionRate ? row.commissionRate + "%" : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="{ row }">
            <el-button type="text" @click="eaditSource(row.id)">修改</el-button>
            <el-button type="text" @click="deleteSource(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <AddSource ref="addsource" @success="handleSource()" />
  </div>
</template>
<script>
event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
import AddSource from './addSource.vue';
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    AddSource,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      tableData: [],
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
    };
  },
  mounted() {
    this.handleSource();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async deleteSource(id) { // 删除
      const confirmResult = await this.$confirm("请确认是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      } else {
        this.$api["networkpower/customersource/deleteSource"]({ id }).then((res) => {
          if (res.code !== 200) return this.$message.error("单个删除顾客来源失败");
          this.$message.success("已删除成功");
          this.handleSource();
        });
      }
    },
    eaditSource(id) { // 修改
      console.log(id, "修改");
      this.$refs.addsource.configure(id);
    },
    addSources() {
      this.$refs.addsource.configure();
    },
    handleSource() {
      this.$api["networkpower/customersource/list"](this.queryParams).then((res) => {
        if (res.code !== 200) return this.$message.error("获取顾客来源失败");
        this.tableData = res.data.result;
        this.total = res.data.total;
      });
    },
    handlePaginationChange(pagination) {
      // 分页
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.handleSource();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-col{
  text-align: right;
  margin-bottom: 10px;
}
</style>
